<template>
    <div class="StayH">
<!--        <div class="stay">-->
<!--            <div class="stay-left">-->
<!--                <van-icon class="stay-center" @click="stayToHome" size="30" color="white" name="wap-home-o" />-->
<!--            </div>-->
<!--            <div class="stay-right">-->
<!--                <van-icon class="stay-center" size="30" color="white" name="ellipsis" />-->
<!--            </div>-->
<!--        </div>-->
      <HomeTypeHeader :icon-left="iconLeft"></HomeTypeHeader>
      <Swiper :allList="allList"></Swiper>
    </div>
</template>

<script>
    import {Lazyload} from 'vant';
    import Swiper from '@/utils/common/Swiper'
    import HomeTypeHeader from "@/utils/common/HomeTypeHeader";
    export default {
        name: "StayHeader",
        data(){
            return {
                allList: [],
                iconLeft: '\ue69c'
            }
        },
        components:{
          HomeTypeHeader,
          Lazyload,
          Swiper
        },
        mounted() {
            this.staySwiper();
        },
        methods:{
            staySwiper(){
                this.getRequest("/home/stay/list").then(res => {
                    if (res) {
                        this.allList = res.data;
                    }
                })
            },
            stayToHome(){
                this.$router.push("/")
            }
        }
    }
</script>

<style lang="scss" scoped>
.stay{
    position: fixed;
    display: flex;
    justify-content: space-between;
    z-index: 100;
    width: 92%;
    left: 4%;
    top: 1%;
}
.stay-left, .stay-right{
    background-color: rgba(0,0,0,0.4);
    border-radius: 50%;
    width: .8rem;
    height: .8rem;
    text-align: center;
}
.stay-center{
    line-height: .8rem;
}

</style>
